<template>
  <div class="details">
    
    <div class="all">
      <div class="breadnav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>母婴专区</el-breadcrumb-item>
          <el-breadcrumb-item>奶粉</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="content">
        <div class="cont_left">
          <div class="img_lg" style="width:380px;height:380px">
            <!-- <img :src="product[0].img_lg"> -->
            <!-- 放大镜功能 -->
            <pic-zoom :url="product[0].img_lg+''" :scale="1.5"></pic-zoom>
          </div>
          <div class="img_sm">
            <div class="left_arrows"><img src="/img/details/left_arrows.png"></div>
            <div class="img_xiao">
              <img :src="product[0].img_lg">
            </div>
            <div class="right_arrows"><img src="/img/details/right_arrows.png"></div>
          </div>
        </div>
        <div class="cont-middle">
          <div class="title">
            <div>保税区发货</div>
            <div class="lineH">{{product[0].title1}}</div>
          </div>
          <div class="date">
            <span>参考日期：</span>
            <span>{{product[0].reDate}}</span>
            <span>月以后</span>
          </div>
          <div class="price1">
            <span>市场价：</span>
            <!-- 删除线效果 -->
            <span style="text-decoration:line-through">¥ {{Number(product[0].price).toFixed(2)}}</span>
          </div>
          <div class="price2">
            <span>本店价： </span>
            <span>¥ {{Number(product[0].price*0.8).toFixed(2)}}</span>
          </div>
          <div class="product_id">
            <span>商品货号 </span>
            <span>{{product[0].pro_id}}</span>
          </div>
          <div class="brand">
            <span>品 牌 </span>
            <span>进入 </span>
            <span>{{product[0].brand}} </span>
            <span>品牌馆</span>
          </div>
          <div class="sales">
            <span>销 量 </span>
            <span>已售出 13021</span>
          </div>
          <div class="count">
            <span>数 量 </span>
            <button @click="minus">-</button>
            <input type="text" v-model="count">
            <button @click="add">+</button>
            <span> 件</span>
          </div>
          <div class="btns">
            <div class="btn1">立即购买</div>
            <div class="btn2" @click="addCart">加入购物车</div>
            <div class="btn3" @click="tocart">购物车</div>
            <div class="btn4">
              <img src="/img/details/shouji0.png">
            </div>
          </div>
        </div>
        <div class="cont-right">
          <div class="title">
            <span>看了又看</span>
            <span>换一组</span>
          </div>
          <div class="img">
            <div class="img1"><img src="/img/details/xin1.jpg"></div>
            <div class="img2"><img src="/img/details/xin2.jpg"></div>
            <div class="img3"><img src="/img/details/xin3.jpg"></div>
          </div>
        </div>
      </div>

      <div class="detail">
        <div class="detail_left">
          <div class="parameter">
            <div class="nav">
              <router-link to="#" class="nav_a1">规格参数</router-link>
              <router-link to="#" class="nav_a2">产品介绍</router-link>
            </div>
            <div class="content1">
              <div>规格参数</div>
              <div>
                <div class="d-flex">
                  <div class="content_left">产品名称 :</div>
                  <div class="content_right">	{{product[0].title1}}</div>
                </div>
                <div class="d-flex">
                  <div class="content_left">产品品牌 :</div>
                  <div class="content_right">	{{product[0].brand}}</div>
                </div>
                <div class="d-flex">
                  <div class="content_left">贸易类型:</div>
                  <div class="content_right">保税区发货</div>
                </div>
              </div>
            </div>
          </div>
          <div class="p_img">
            <div><img :src="product[0].img1"></div>
            <div><img :src="product[0].img2"></div>
            <div><img :src="product[0].img3"></div>
            <div><img :src="product[0].img4"></div>
            <div><img :src="product[0].img5"></div>
            <div><img :src="product[0].img6"></div>
          </div>

        </div>
       
        <div class="detail_right">
          <div class="titlet">精彩推荐</div>
          <div class="content2">
            <ul>
              <!-- <li v-for="p of product_j1.slice(Math.floor(Math.random()*50))" :key="p.pid"> -->
              <li v-for="p of product_j1.slice(0,25)" :key="p.pid">
                <div class="imgj1">
                  <router-link :to="`/details/${p.pid}`">
                    <img :src="p.img_lg">
                  </router-link>              
                </div>
                <div class="titlej1">{{p.title1}}</div>
                <div class="pricej1">¥ {{p.price}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>      
    </div>

  </div>
</template>


<script>
//VUE 
import PicZoom from "vue-piczoom"
import { mapMutations } from 'vuex'
export default {
  components:{
    PicZoom
  },

  data(){
    return {
      product:[{details_img:0}],
      count_n:"1",
      product_j1:[],
      count:1,
    }
  },
  methods:{
    ...mapMutations(['_addCartList']),
    addCart(){
      let product = {
        pid:this.$route.params.pid,
        img:this.product[0].img_lg,
        title1:this.product[0].title1,
        price:this.product[0].price,
        count:Number(this.count),
      }
      //添加到vuex里
      this._addCartList(product)
      // console.log(this.product[0].pid)
      alert('已添加购物车')

    },

    getProduct(){
      this.pid=this.$route.params.pid
      this.axios.get(`/ub/details`,{params:{pid:this.pid}})
        .then(result=>{
            this.product=result.data;
            // console.log(this.product)
      })
    },

    minus(){
      if(this.count>1){
        this.count--;
      }else{
        alert("购买数量最少 1 件,谢谢!")
      }
    },
    add(){
      this.count++;
    },
    product_j(){  //商品列表
      this.axios.get("/ub/product").then(result=>{
        // console.log(result.data)
        this.product_j1 = result.data;
      }
    )},
    tocart(){
      this.$router.push('/cart')
    },
  },
  mounted(){
    this.getProduct();
    this.product_j();
  }
}
</script>

<style scoped>
.lineH{
  line-height: 30px;
}
.detail_right .content2{
  font-size: 12px;
}
.detail_right .content2 ul{
  padding: 10px;
}
.detail_right .content2 ul li{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.detail_right .content2 .titlej1{
  padding: 10px;
}
.detail_right .content2 .pricej1{
  font-size: 14px;
  color: #e73736;
  font-weight: bold;
  padding: 0 0 10px 10px ;
}
.detail_right .content2 .imgj1{
  width: 194px;
  height: 194px;
}
.detail_right .content2 .imgj1 img{
  width: 100%;
}
.detail .detail_right{
  width: 220px;
  font-size: 18px;
  background-color: #fff;
  margin-left: 10px;
  text-align: left;
}
.detail .detail_right .titlet{
  padding: 16px 10px ;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
}
.detail_left{
  width: 970px;
  background-color: #fff;
}
.detail_left .parameter .content1>div:first-child{
  text-align: left;
  font-size: 18px;
  padding: 20px 20px;
}
.detail_left .parameter .content_left{
  width: 163px;
  height: 24px;
  color: #333;
  font-size: 14px;
  background-color: #f5f5f5;
  margin: 3px 3px 0 20px;
  border: 1px solid #e5e5e5;
  padding: 5px 10px;
  font-weight: bold;
  line-height: 24px;
  text-align: right;
}
.detail_left .parameter .content_right{
  font-size: 14px;
  text-align: left;
  width: 720px;
  margin-top: 3px;
  border: 1px solid #e5e5e5;
  line-height: 24px;
  padding: 5px 10px;
}
.d-flex{
  display: flex;
}
.detail_left .parameter{
  width: 970px;
}
.detail_left .parameter .nav{
  display: flex;
  border-bottom: 1px solid #ddd;
}
.detail_left .parameter a{
  display: block;
  font-size: 18px;
  color: #cd0606;
  padding: 15px 30px;
}
.detail_left .parameter .nav_a1{
  border-bottom: 2px solid #cd0606;
  width: 100px;
}
.detail_left .parameter .nav_a2{
  color: #666;
}
.detail_left .parameter .content1{
  height: 156px;
  margin-bottom: 50px;
}
.details{
  background-color: rgb(245, 245, 245);
  padding-bottom: 50px;
}
.details .all{
  width: 1200px;
  margin: 0 auto;
  
}
.details .breadnav{
  padding: 18px 0;
}
.details .content{
  height: 500px;
  background-color: #fff;
  display: flex;
}
.details .detail{
  margin-top: 16px;
  width: 1200px;
  display: flex;
}
.details .detail .p_img>div:last-child{
  margin-bottom: 50px;
}
.details .detail .p_img{
  width: 970px;
}
.content .cont_left{
  width: 410px;
  height: 478px;
  padding-top: 10px;
}
.content .cont_left .img_lg{
  height: 180px;
  width: 380px;
  margin: 0 auto;
}
.content .cont_left .img_lg img, .content .cont_left .img_sm .img_xiao img{
  width: 100%;
}
.content .cont_left .img_sm{
  margin-top: 10px;
  width: 380px;
  height: 56px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
}
.content .cont_left .img_sm .left_arrows, .img_sm .right_arrows{
  line-height: 56px;
  cursor:pointer
}
.content .cont_left .img_sm .img_xiao{
  width: 55px;
  height: 55px;
  border: 1px solid #f00;
  margin-left: -240px;
  cursor:pointer
}
.content .cont-middle{
  width: 562px;
  height: 500px;
  font-size: 12px;
  text-align: left;
}
.content .cont-middle .title{
  display: flex;
  font-size: 22px;
  color: #333;
  margin-top: 12px;

}
.content .cont-middle .title>div:first-child{
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  background-color: #23ab4d;
  padding: 0 5px;
  border-radius: 2px;
  color: #fff;
  margin: 1px 10px 0 0;
}
.content .cont-middle .date{
  color: #888;
  margin-top: 25px;
}
.content .cont-middle .price1{
  color: #222;
  margin-top: 25px;
}
.content .cont-middle .price2{
  margin-top: 12px;
  color: #222;
}
.content .cont-middle .price2>span:nth-child(2){
  color: #cd0606;
  font-size: 32px;
  margin-left: 10px;
}
.content .cont-middle .product_id{
  font-size: 13px;
  margin-top: 25px;
}
.content .cont-middle .product_id>span:first-child{
  color: #555;
}
.content .cont-middle .product_id>span:nth-child(2){
  color: #888;
}
.content .cont-middle .brand{
  margin-top: 15px;
  font-size: 13px;
}
.content .cont-middle .brand>span:first-child{
  margin-right: 20px;
}
.content .cont-middle .brand>span:nth-child(3){
  color: #cd0606;
}
.content .cont-middle .sales{
  font-size: 13px;
  margin-top: 15px;
}
.content .cont-middle .sales>span:first-child{
  margin-right: 20px;
}
.content .cont-middle .count{
  margin-top: 25px;
  font-size: 13px;
}
.content .cont-middle .count>span:first-child{
  margin-right: 20px;
}
.content .cont-middle .count input{
  width: 66px;
  height: 28px;
  outline: none;
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  text-align: center;
}
.content .cont-middle .count button{
  width: 30px;
  height: 32px;
  border: 1px solid #ccc;
}
.content .cont-middle .btns{
  display: flex;
  margin-top: 20px;

}
.content .cont-middle .btns .btn1,.content .cont-middle .btns .btn2,.content .cont-middle .btns .btn3{
  width: 106px;
  height: 40px;
  background-color: #ff4200;
  color: #fff;
  font-size: 16px;
  margin-right: 14px;
  border-radius: 3px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.content .cont-middle .btns .btn1:hover{
  background-color: #fd3b0ad5;
}
.content .cont-middle .btns .btn2{
  width: 122px;
  background-color: #e73736;
}
.content .cont-middle .btns .btn2:hover{
  background-color: #f00;
}
.content .cont-middle .btns .btn3{
  background-color: #efefef;
  font-size: 14px;
  color: #666;
  width: 70px;
  height: 39px;
  border:1px solid #ccc;
}
.content .cont-middle .btns .btn3:hover{
  background-color: #e5e5e5;
}
.content .cont-middle .btns .btn4{
  margin-top: -1px;
}
.content .cont-right{
  width: 200px;
  height: 465px;
  margin-top: 20px;
}
.content .cont-right .title>span:last-child{
  color: #888;
  margin-left: 80px;
}
.content .cont-right .title{font-size: 15px;}
.content .cont-right .img{
  width: 132px;
  height: 435px;
  margin: 0 auto;
  margin-top: 12px;
}
.content .cont-right .img .img1,.content .cont-right .img .img2,.content .cont-right .img .img3{
  width: 130px;
  height: 130px;
  border: 1px solid #bbb;
  margin-top: 12px;
}
.content .cont-right .img img{
  width: 100%;
}


</style>